<script setup>

import { ref } from 'vue'

const selectedType = ref('医疗健康');
const searchText = ref('');

const addKnowledge = () => {
  // 新增知识的方法
};

const search = () => {
  // 查询的方法
};

const items = ref([
  { serialNumber: 1, knowledgeName: '对气滞血瘀症状的推理', knowledgeType: '气滞血瘀', conclusion: '正向', sort: '周期1', trustLevel: 'Admin', enable: '2023-03-02', fact: '气滞血瘀' },
  { serialNumber: 2, knowledgeName: '对血红蛋白过高的推理', knowledgeType: '血红蛋白', conclusion: '正向', sort: '周期2', trustLevel: 'Admin', enable: '2023-03-02', fact: '血红蛋白' },
  { serialNumber: 3, knowledgeName: '对淋巴细胞过少的推理', knowledgeType: '淋巴细胞', conclusion: '正向', sort: '周期3', trustLevel: 'Admin', enable: '2023-03-02', fact: '淋巴细胞' },
  { serialNumber: 4, knowledgeName: '对淋巴细胞过少且血小板过多的推理', knowledgeType: '淋巴细胞', conclusion: '正向', sort: '周期4', trustLevel: 'Admin', enable: '2023-03-02', fact: '淋巴细胞' },
  { serialNumber: 5, knowledgeName: '对肾虚盗汗治疗的推理', knowledgeType: '肾虚盗汗', conclusion: '反向', sort: '周期1', trustLevel: 'Admin', enable: '2023-03-02', fact: '肾虚盗汗' }
])

//查看按钮
const viewItem = () => {
}

// 删除按钮
const deleteItem = () => {
}

</script>

<template>
  <div class="main-content">
    <div class="title">推理决策/事实数据库</div>
    <!-- 表格上一行 -->
    <div class="hang">
      <button @click="addKnowledge">新增事实</button>
      <select v-model="selectedType">
        <option value="医疗健康">医疗健康</option>
        <option value="电商营销">电商营销</option>
        <option value="物流金融">物流金融</option>
      </select>
      <input type="text" v-model="searchText" placeholder="请输入知识名称">
      <button @click="search">查询</button>
    </div>
    <!-- 表格上一行---end -->

    <!-- 表格 -->
    <div class="container mx-auto">
      <table class="w-full border-collapse table-fixed">
        <thead>
          <tr>
            <th class="w-1/12 border">序号</th>
            <th class="w-2/12 border">推理标题</th>
            <th class="w-1/12 border">规则</th>
            <th class="w-2/12 border">推理模式</th>
            <th class="w-1/12 border">周期</th>
            <th class="w-1/12 border">创建人</th>
            <th class="w-1/12 border">创建时间</th>
            <th class="w-2/12 border">事实</th>
            <th class="w-3/12 border">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in items" :key="index">
            <td class="border">{{ item.serialNumber }}</td>
            <td class="border">{{ item.knowledgeName }}</td>
            <td class="border">{{ item.knowledgeType }}</td>
            <td class="border">{{ item.conclusion }}</td>
            <td class="border">{{ item.sort }}</td>
            <td class="border">{{ item.trustLevel }}</td>
            <td class="border">{{ item.enable }}</td>
            <td class="border">{{ item.fact }}</td>

            <td class="border flex justify-space-between">
              <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mx-2"
                @click="viewItem(item)">查看</button>
              <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded mx-2"
                @click="deleteItem(item)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 表格---end -->

  </div>
</template>



<style scoped>
/* 总的右边内容 */

.main-content {
  display: inline-block;
  vertical-align: top;
  /* 垂直对齐 */
}

/* 第一句话 */
.title {
  background-color: #f2f2f2;
  color: #333;
  padding: 10px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 第一句话--------------------------------end */

/* 右边第一行 */
.hang {
  text-align: center;
  margin-top: 20px;
}

button,
select,
input {
  margin: 5px;
  padding: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button:hover,
select:hover,
input:hover {
  background-color: #f2f2f2;
}

/* 右边第一行--------------------end */

/* 表格的样式 */
.container {
  display: inline-block;
  margin-top: 40px;
  margin-left: 60px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 8px;
  border: 1px solid #ccc;
}

th {
  background-color: #f2f2f2;
  font-weight: bold;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* 表格的样式--------------------------------------end */


/* 总的右边内容--end */
</style>